import { PureComponent } from 'react'
import { Modal, Select, DatePicker, InputNumber, Table } from 'antd'
import styles from './collectListModal.less'
const { Option } = Select
class CollectionListModal extends PureComponent {
    handleCancel = () =>{
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    render(){
        const { visible } = this.props
        const columns = [
            {
              title: '转运单号',
              dataIndex: 'name',
              align: 'center',
              key: '1'
            },
            {
              title: '金额',
              dataIndex: 'money',
              align: 'center',
              key: '2'

            },
            {
              title: '备注',
              dataIndex: 'address',
              align: 'center',
              key: '3'

            },
            {
              title: '操作人',
              dataIndex: 'address',
              align: 'center',
              key: '4'

            },
            {
              title: '录入时间',
              dataIndex: 'address',
              align: 'center',
              key: '5'

            },
            {
              title: '已收款',
              dataIndex: 'address',
              align: 'center',
              key: '6'

            },
            {
              title: '未收款',
              dataIndex: 'address',
              align: 'center',
              key: '7'

            },
            {
              title: '操作',
              dataIndex: 'address',
              align: 'center',
              key: '8'

            },
          ];
          
          const data = [
            
          ]
          
        return (
            <Modal 
                title="收款详情"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={800}
            >
                <div className={styles.collectModalSearch}>
                    <div className={styles.collectModalSin}>
                        <span className={styles.collectionModalSpan}>支付方式：</span>
                        <Select className={styles.collectionModalInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                    <div className={styles.collectModalSin}>
                        <span className={styles.collectionModalSpan}>汇率时间：</span>
                        <DatePicker className={styles.collectionModalInput} />
                    </div>
                </div>
                <div className={styles.collectModalSearch}>
                    <div className={styles.collectModalSin}>
                        <span className={styles.collectionModalSpan}>总金额：</span>
                        <InputNumber min={1} className={styles.collectionModalInput} />
                    </div>
                    <div className={styles.collectModalSin}>
                        <span className={styles.collectionModalSpan}>货币：</span>
                        <Select className={styles.collectionModalInput}>
                            <Option value="value">value</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.collectModalSearch}>
                    <div className={styles.collectModalSin}>
                        <span className={styles.collectionModalSpan}>汇率：</span>
                        <InputNumber min={1} className={styles.collectionModalInput} />
                    </div>
                </div>
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered
                    title={() => (<span>测试</span>)}
                    // footer={() => 'Footer'}
                />
            </Modal>
        )
    }
}
export default CollectionListModal